import enquireJs from 'enquire.js'

export const SCREEN = {
  xs: 'xs',
  sm: 'sm',
  md: 'md',
  lg: 'lg',
  xl: 'xl'
}

export const deviceEnquire = function(callback) {
  const xs = {
    match: () => {
      callback && callback(SCREEN.xs)
    }
  }

  const sm = {
    match: () => {
      callback && callback(SCREEN.sm)
    }
  }

  const md = {
    match: () => {
      callback && callback(SCREEN.md)
    }
  }
  const lg = {
    match: () => {
      callback && callback(SCREEN.lg)
    }
  }
  const xl = {
    match: () => {
      callback && callback(SCREEN.xl)
    }
  }

  // screen and (max-width: 1087.99px)
  enquireJs
    .register('screen and (max-width: 768px)', xs)
    .register('screen and (min-width: 768px) and (max-width: 992px)', sm)
    .register('screen and (min-width: 992px) and (max-width: 1200px)', md)
    .register('screen and (min-width: 1200px) and (max-width: 1920px)', lg)
    .register('screen and (min-width: 1920px)', xl)
}
/**
 * 计算通过技术计算layout布局，获取到对应的span
 *
 * @param {*} layout state.app.layout mapGetter(['layout'])
 * @param {*} options {xl: 10, lg: 10, md: 10, sm: 10, xs: 10}
 * @returns number
 * @example getSpan(this.layout, { xl: 6, lg: 6, md: 10, sm: 12, xs: 24 })
 */
export const getSpan = function(layout, options) {
  const match = (cas) => {
    return options[cas] || options[cas] === 0
  }
  switch (layout) {
    case 'xl':
      if (match('xl')) {
        return options['xl']
      }
    // eslint-disable-next-line no-fallthrough
    case 'lg':
      if (match('lg')) {
        return options['lg']
      }
      // eslint-disable-next-line no-fallthrough
    case 'md':
      if (match('md')) {
        return options['md']
      }
      // eslint-disable-next-line no-fallthrough
    case 'sm':
      if (match('sm')) {
        return options['sm']
      }
      // eslint-disable-next-line no-fallthrough
    case 'xs':
      if (match('xs')) {
        return options['xs']
      }
      // eslint-disable-next-line no-fallthrough
    default:
      return 24
  }
}
export default {
  install: (app) => {
    app.prototype.$getSpan = getSpan
  }
}
